<template>
	<view>
		<u-cell title="下单成功!" :label="order.orderType<20?'师博在赶来的路上，请您而心等待!':'师傅准备上门揽件，请保持手机畅通!'" :border="false" >
			<u-icon slot="icon" size="48rpx" color="#f00" name="checkmark-circle-fill"></u-icon>
		</u-cell>
		<view class="box-container">
			<u-cell :title="order.senderName + ' ' + order.senderPhone" :label="order.senderProvince + order.senderCity + order.senderRegion + order.senderDetailAddress" :border="false">
				<view slot="icon" class="title"><view class="icon"></view>寄</view>
			</u-cell>
			<u-cell :title="order.receiverName + ' ' + order.receiverPhone" :label="order.receiverProvince + order.receiverCity + order.receiverRegion + order.receiverDetailAddress" :border="false">
				<view slot="icon" class="title"><view class="icon"></view>收</view>
			</u-cell>
			
			<u-cell-group class="mt32">
				<u-cell title="物品" :value="order.goodsName" :border="false" ></u-cell>
				<u-cell title="增值服务" :value="valueadd" :border="false" v-if="valueadd"></u-cell>
				<u-cell title="计费重量" :value="order.goodsWeight + 'kg'" :border="false" ></u-cell>
				<u-cell title="付费方式" :value="'在线支付'" :border="false"  class="mt32"></u-cell>
				<u-cell :title="order.orderType<20?'搬运费':'物流费'" :value="order.amountGoods + '元'" :border="false"></u-cell>
				<u-cell title="增值服务费" :value="order.amountPack + '元'" :border="false" v-if="order.amountPack"></u-cell>
				<u-cell title="保险费" :value="order.amountSafe + '元'" :border="false" v-if="order.amountSafe"></u-cell>
			</u-cell-group>
			<u-line ></u-line>
			<view class="mt32 t32 flex-right">
				<label>预估总价:</text><text class="c-error tbold">￥{{order.amountTotal}}</text></label>
			</view>
		</view>
		<!-- <view class="submit-btn mt64">
			<u-button type="error" size="large" shape="circle" text="取消订单" @click="yuyueJoinDelete"></u-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {
					"orderType": 11,
					"receiverProvince": "广东省",
					"receiverCity": "广州市",
					"goodsWeight": 100,
					"senderName": "张三",
					"senderRegion": "琶洲展馆A馆",
					"receiverPhone": "13888888888",
					"payType": 1,
					"receiverRegion": "琶洲展馆B馆",
					"deleteStatus": 0,
					"goodsNumber": 1,
					"confirmStatus": 0,
					"id": 1,
					"goodsName": "衣服",
					"amountGoods": 100,
					"receiverName": "李四",
					"goodsVolume": 1,
					"senderProvince": "广东省",
					"receiverDetailAddress": "101展位",
					"userName": "琶洲展馆",
					"userId": 1,
					"senderCity": "广州市",
					"senderPhone": "138000000",
					"senderDetailAddress": "101展位",
					"createTime": "2024-01-17T09:19:35",
					"time": "202401202000",
					"status": 0
				},
				valueadd:undefined,
				packWooden:undefined,
				packCarton:undefined
			}
		},
		created() {
		
		},
		mounted() {
			
		},
		onReady() {
			
		},
		onLoad(e) {
			if(e.id) {
				this.getData(e.id)
			}
		},
		onShow() {

		},
		methods: {
			async getData(id) {
				// https://www.yuque.com/apifm/nu0f75/mmte1o
				const res = await this.$wxapi.queryOrder(this.token,id)
				if (res.code == 0) {				
					this.order = res.data
					var arr=[]
					if(this.order.packWooden !== undefined){
						this.packWooden=JSON.parse(this.order.packWooden)
						arr.push(this.packWooden.name)
					}
					if(this.order.packCarton !== undefined){
						this.packCarton=JSON.parse(this.order.packCarton)
						arr.push(this.packCarton.name)
					}
					this.valueadd=arr.join(",")
				}
			},
			async yuyueJoinDelete(item) {
				uni.showModal({
					title: '请确认',
					content: '确定要取消吗？',
					success: res => {
						if (res.confirm) {
							this._yuyueJoinDelete(item)
						}
					}
				});
			},
			async _yuyueJoinDelete() {
				const res = await this.$wxapi.yuyueJoinDelete(this.token, this.joinInfo.id)
				if (res.code != 0) {
					uni.$u.toast(res.msg)
				} else {
					uni.showToast({
						title: '已取消',
						icon: 'success'
					})
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 1000)
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.box-container {
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
		border-radius: 16rpx;
		box-shadow: 2rpx 2rpx 8px #ddd;
		background-color: #fff;
		padding: 64rpx 32rpx;
		box-sizing: border-box;

		.title{
		  font-size:28rpx;
		  font-weight: bold;
		  color:#000000;
		  padding: 0rpx;
		  display: flex;
		  align-items: center;
		  margin-right: 20rpx;
		  .icon {
		    width: 6rpx;
		    height: 30rpx;
		    background: linear-gradient(360deg, #FFAD56 0%, #FF8A46 100%);
		    margin-right: 8rpx;
		  }
		}
	}
	
</style>